<template>
    <div class="home_content">
        <el-container>
            <el-header class="headers">
                <el-row>
                    <el-col :span="24">
                        <div>
                            <div class="header_logo lb">
                                <figure>
                                    <img src="../assets/iamges/logo.png" alt="" style="width:100px;height:30px;">
                                </figure>
                            </div>
                            <div class="header_right lb fr">
                                <el-dropdown @command="handleCommand">
                                    <span class="el-dropdown-link">
                                        <i class="el-icon-user-solid" style="padding-right:9px;"></i>admin<i class="el-icon-arrow-down"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="a">退出</el-dropdown-item>
                                    </el-dropdown-menu>
                                    </el-dropdown>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <!-- 侧边栏 start -->
                <el-aside width="205px">
                    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" 
                    @open="handleOpen" 
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">导航一</span>
                        </template>
                        <el-menu-item-group>
                        <span slot="title">分组一</span>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                        <span slot="title">选项4</span>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- 侧边栏 end -->
                <!-- 中间内容部分 start -->
                <el-main>
                    <router-view></router-view>
                </el-main>
                <!-- 中间内容部分end -->
            </el-container>
        </el-container>
        
    </div>
</template>
<script>

export default {
    name:'',
    data () {
        return {
            
        }
    },
    created () {
        
    },
    mounted () {
        
    },
    methods: {
        handleCommand(command) {
            console.log(command);    
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    components: {
        
    }
}
</script>
<style>
.headers{
        background-color: aquamarine;
        line-height: 50px;
        color:#000;
        padding:0 50px 0 10px;
    }
.header_right{
    text-align: right;
}

</style>

